<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>双人消消乐对战</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <!-- CrazyGames SDK 官方引用 -->
    <script src="https://sdk.crazygames.com/crazygames-sdk-v3.js"></script>
</head>
<body>
    <div class="game-container">
        <div class="header">
            <h1>双人消消乐对战</h1>
            <div class="score-board">
                <div class="player player1">
                    <div class="player-label">玩家1</div>
                    <div class="score player1-score">0</div>
                </div>
                <div class="timer">
                    <div class="timer-label">时间</div>
                    <div class="timer-value">60</div>
                </div>
                <div class="player player2">
                    <div class="player-label">玩家2</div>
                    <div class="score player2-score">0</div>
                </div>
            </div>
        </div>
        
        <div class="game-board-container">
            <div class="game-board player1-board"></div>
            <div class="game-board player2-board"></div>
        </div>
        
        <div class="control-buttons">
            <div class="player-controls player1-controls">
                <button class="move-button left-button" id="player1-left">←</button>
                <button class="move-button right-button" id="player1-right">→</button>
            </div>
            
            <div class="game-buttons">
                <button id="start-button">开始游戏</button>
                <button id="restart-button" style="display: none;">重新开始</button>
            </div>
            
            <div class="player-controls player2-controls">
                <button class="move-button left-button" id="player2-left">←</button>
                <button class="move-button right-button" id="player2-right">→</button>
            </div>
        </div>
        
        <div class="instructions">
            <p>点击左右按钮移动方块 | 三个或更多相同颜色的相邻方块可消除</p>
        </div>
    </div>
    
    <div class="game-over-modal" id="game-over-modal">
        <div class="modal-content">
            <h2 id="winner-text">游戏结束</h2>
            <p id="final-score"></p>
            <button id="play-again">再来一局</button>
        </div>
    </div>

    <script src="js/game.js"></script>
</body>
</html> 